<template>
  <!-- 顶部栏 -->
  <div style="position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 1000">
    <div style="height: 70px; background-color: white; position: relative; left: 0; top: 0; width: 100%; padding: 0; line-height: 70px; overflow: hidden">
      <!-- 顶部条的内容元素 -->
      <a href="http://localhost:9090/header" style="margin-left: 90px; position: absolute">
        <img style="height: 70px" src="智启航图标.jpg" alt="" />
      </a>
      <span style="font-size: 30px; font-weight: bold; line-height: 70px; position: absolute; color: cornflowerblue; margin-left: 150px">智启航</span>

      <!-- 中间按钮 -->
      <ul style="list-style-type: none; display: flex; flex-direction: row; margin-left: 450px; font-size: 22px; font-weight: bold; margin-top: 0px">
        <li style="margin-right: 50px">
          <a href="http://localhost:9090/header" style="text-decoration: none">首页</a>
        </li>
        <li style="margin-right: 50px">
          <a href="http://localhost:9090/teacher" style="text-decoration: none">师资力量</a>
        </li>
        <li style="margin-right: 50px">
          <a href="http://localhost:9090/free" style="text-decoration: none">免费课</a>
        </li>
      </ul>

      <!-- 用户中心 -->
      <el-button @click="login" style="font-size: 16px; position: absolute; right: 120px; top: 20px" v-if="user==null">登录/注册</el-button>
      <el-dropdown trigger="click" style="position: absolute; right: 200px; top: 20px" v-if="user!=null">
        <span style="font-size: 19px; font-weight: bold;">
          {{user.username}}
          <el-icon><arrow-down/></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!--登录之后才能够跳转的选项,这里应该跳转的是更详细的用户相关的页面-->
            <el-dropdown-item @click="router.push('/user')">用户中心</el-dropdown-item>
            <el-dropdown-item @click="router.push('/course')">课程管理</el-dropdown-item>
            <el-dropdown-item @click="router.push('/order')">订单中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <!-- 页面内容 -->
  <div style="padding-top: 70px;padding-left: 40px;padding-right: 0;padding-right: 40px">
    <el-main>
      <router-view/>
    </el-main>
  </div>

  <!-- 底部灰色遮罩栏 -->
  <div style="height: 200px; background-color: #282c30; width: 100%; z-index: -1">
    <el-footer style="position: relative">
      <!-- 每个页面都有底部灰色遮罩栏 -->
      <div style="position: absolute;width: 50%;left: 200px;top:60px">
        <!--这个是页脚的左边部分，放两行-->
        <p style="color:white;">
          <!--一行放四个元素：关于我们、招聘信息、联系我们、商务合作、帮助页面-->
          <a>关于我们</a><span style="padding-left: 30px;padding-right: 30px">|</span>
          <a>招聘信息</a><span style="padding-left: 30px;padding-right: 30px">|</span>
          <a>联系我们</a><span style="padding-left: 30px;padding-right: 30px">|</span>
          <a>商务合作</a><span style="padding-left: 30px;padding-right: 30px">|</span>
          <a>帮助页面</a>
        </p>
        <p style="color:ghostwhite;">
          <!--这一行预备放copyright-->
          <span>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</span>
        </p>
      </div>

      <div style="position: absolute;width: 50%;right: 20px;top:60px">
        <!--页脚的右边部分：一个二维码（假的）和一些介绍信息-->
        <p style="color:ghostwhite;text-align: center">
          <!--介绍信息-->
          <span>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</span>
        </p>
        <p style="color:ghostwhite;text-align: center">
          <span>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</span>
        </p>
        <!--二维码-->
        <img src="" >
      </div>

    </el-footer>
    <!--来一条距离下边界大概20px的淡白色线，但是左边跟右边大概40px的间距没有-->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from "@/router";

const login = () => {
  console.log("登录功能");
  router.push("/login");
}

const user = ref(getUser());
// const user=ref({username:"admin"});

const logout = () => {
  if (confirm('您确认要退出登录吗?')) {
    localStorage.removeItem('user');
    window.location.href = '/header';
    user.value = '';
  }
}
</script>

<style>
/* 可以在这里添加全局样式 */
</style>